投資、程式、工具、生活

0%

CSS輕鬆玩(1) - Animation - 就決定是你了！皮卡丘！

發表於 更新於 分類於 ， Disqus：
在介紹CSS動畫之前，我們先來了解一下什麼是動畫？人眼觀看物體時，成像於視網膜上，並由視覺神經進入我們的大腦，我們才感覺到物體的成像，但當物體移去時，視覺神經對物體的印象不會立即消失，這個現象就稱為視覺暫留。利用這個視覺暫留，我們可以製作一格一格連續動作的圖片，然後快速的播放，這些快速播放的圖片就會在大腦中形成動畫效果。在CSS中我們就是透過@keyframes來設定動畫

什麼是動畫？

在介紹CSS動畫之前，我們先來了解一下什麼是動畫？

人眼觀看物體時，成像於視網膜上，並由視覺神經進入我們的大腦，我們才感覺到物體的成像，但當物體移去時，視覺神經對物體的印象不會立即消失，而要延續0.1-0.4秒的時間，而這個現象就稱為視覺暫留

利用這個視覺暫留，我們可以製作一格一格連續動作的圖片，然後快速的播放，這些快速播放的圖片就會在大腦中形成動畫效果

也因此誕生了手翻書動畫:

當我們接觸遊戲或者編輯影片的時候，就會經常會看到FPS(Frame per second/Frame Rate，每秒幀數)，
我們可以把Frame示為一張圖片，那麼30fps就代表著每秒切換30張圖片來形成我們的動畫效果。
FPS介紹

CSS Animation

介紹了動畫的原理之後，那麼在CSS中我們就是透過@keyframes來設定動畫，
你可以用百分比來指定細部過程的變化，或是直接用from-to來設定開始和結束，
剩下的過程，就會交給瀏覽器「自動」來產生變化，如下: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@keyframes my-animation
{
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}
@keyframes from-to-animation {
  /* 等於 0% */
  from { 
    background-color: red;
  }
  /* 等於 100% */
  to {
    background-color: yellow;
  }
}

/* class demo1 套用 my-animation 動畫，執行時間0.8秒(可寫0.8s或簡寫.8s)，:hover 代表滑鼠移上去才執行*/
.demo1:hover { 
  animation: my-animation .8s;
}
/* class demo1 套用 from-to-animation 動畫，執行時間0.8秒(可寫0.8s或簡寫.8s，:hover 代表滑鼠移上去才執行) */
.demo2:hover  {
  animation: from-to-animation .8s;
}
1
2
<div class="demo1">demo1</div>
<div class="demo2">demo2</div>

結果:

demo1
demo2

Animation 屬性介紹

屬性 介紹
animation-name 動畫名稱
animation-duration 動畫持續時間，預設 0，單位 s 或 ms。
animation-delay 動畫延遲播放時間，預設 0，單位 s 或 ms。
animation-iteration-count 動畫播放次數，預設 1。 infinite(連續播放)。
animation-timing-function 動畫加速度函式，預設 ease。其他: linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。 往下看範例
animation-direction 動畫播放方向
normal:默認值，動畫正常播放（向前）
reverse: 反向播放動畫（向後）
alternate:交替動畫，先往前播放，再往後播放
alternate-reverse:交替動畫，先向後播放，然後向前播放。
animation-fill-mode 動畫播放前後模式，預設 none。其他還有 forwards、backwards、both。
animation-play-state 動畫播放或暫停狀態，預設 running。其他還有 paused。

這麼多屬性，寫一堆實在太麻煩了，因此我們通常只記一種:

1
animation: name duration timing-function delay iteration-count direction fill-mode;

這邊額外解釋一下animation-timing-function，
因為其實自己也看的不是很懂，所以就直接做個範例看看效果吧！

  • animation-timing-function
ease: 慢進慢出
linear: 一致
ease-in: 緩慢開始
ease-out: 緩慢結束
ease-in-out: 緩慢開始+緩慢結束
step-start，等同於steps(1, start)
step-end，等同於steps(1, end)
steps(n, end)，將動畫切成n段，這裡以5段(n=5)為例
cubic-bezier(n,n,n,n)，自定義速率

有興趣研究更深的話可以看更詳細的解釋

常被拿來用的CSS屬性: transform

transform 屬性的功能提供了網頁設計對於網頁元素（element）變形特效的突破，使我們可以很輕易的讓網頁元素（element）呈現出旋轉（rotate）、縮放（scale）、移動（move）以及傾斜（skew）的特殊效果。

參數 說明
translate(x,y) 由參考點進行 2D 轉換特效，向 x 軸移動 x 距離，Y 軸移動 y 距離。
translate3d(x,y,z) 由參考點進行 3D 轉換特效。
translateX(x) 定義 X 軸方向的 2D 轉換。
translateY(y) 定義 Y 軸方向的 2D 轉換。
translateZ(z) 定義 Z 軸方向的 3D 轉換。
scale(x,y) 由參考點進行 2D 縮放特效，X 軸方向縮放 x 倍，Y 軸方向縮放 y 倍。
scale3d(x,y,z) 由參考點進行 3D 縮放特效。
scaleX(x) 定義 X 軸方向的 2D 縮放。
scaleY(y) 定義 Y 軸方向的 2D 縮放。
scaleZ(z) 定義 Z 軸方向的 2D 縮放。
rotate(角度) 根據設定的角度(deg)，以參考點為中心軸進行 2D 旋轉。
rotate3d(x,y,z,角度) 根據設定的角度(deg)，以參考點為中心軸進行 3D 旋轉。
rotateX(角度) 沿著 X 軸進行 3D 旋轉所設定的角度。
rotateY(角度) 沿著 Y 軸進行 3D 旋轉所設定的角度。
rotateZ(角度) 沿著 Z 軸進行 3D 旋轉所設定的角度。
skew(x,y) 以參考點為中心，沿著 X 軸方向傾斜 x 度，沿著 Y 軸方向傾斜 y 度。
skewX(角度) 以參考點為中心，沿著 X 軸方向傾斜 x 度。
skewY(角度) 以參考點為中心，沿著 Y 軸方向傾斜 y 度。
matrix(6個值) 利用 6 個值的設定進行 2D 矩陣變化，如 transform:matrix(0,0,0,0,0,0)。
matrix3d(16個值) 利用 16 個值的設定進行 3D 矩陣變化。

我們可以同時設定多個參數，中間用空格隔開
例如:我想要「旋轉45度」+「放大1.5倍」就可以寫這樣:

1
transform: rotate(45deg) scale(1.5)
移過來看效果

光是transform這個屬性，搭配剛剛的Animation就可以玩出一堆東西來了
那…就動手來玩玩看吧！

就決定是你了！皮卡丘！

這邊呢..我們先跟Amos大大致敬一下，從他那邊偷借幾顆寶貝球來用 => Amos的神奇寶貝球
這寶貝球是用CSS寫的，只用了一個div就搞定，嗯…而且他寫了9顆不同的樣式啊…

嗯…經過了一番加工後，您能不能猜出我用了哪些效果呢？
直接來看看我加入動畫的結果吧！(滑鼠移上去觀看)

pokemon-1
pokemon-2
pokemon-3

.
.
.
.
.

咦…說好的皮卡丘呢？

.
.
.

下面附上程式碼，其中box是從大神那邊偷過來的寶貝球，這邊就省略囉！
HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="balls">
  <div class="ball">
    <div class="box"></div>
    <img class="pokemon" src="/css-fun-pokemonball/pokemon-1.png" alt="pokemon-1">
  </div>
  <div class="ball">
    <div class="box box1"></div>
    <img class="pokemon" src="/css-fun-pokemonball/pokemon-2.png" alt="pokemon-2">
  </div>
  <div class="ball">
    <div class="box box2"></div>
    <img class="pokemon" src="/css-fun-pokemonball/pokemon-3.png" alt="pokemon-3">
  </div>    
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
.ball {
  width: 200px;
  height: 200px;
  margin: 20px 50px;
  box-sizing: border-box;
  position: relative;
}

.ball:hover .box{
  animation: ball-animation .5s 3 forwards, ball-animation-2 .5s 1.5s forwards;
}

.ball:hover .pokemon {
  animation: pokemon-animation .5s 1.5s forwards;
}

.pokemon {
  opacity: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  position: absolute;
}

@keyframes pokemon-animation {
  0% {
    transform: scale(2) rotate(60deg);
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes ball-animation {
  0% {
    transform: rotate(-10deg) translate(-10px, 0px);
  }
  33% {
    transform: rotate(0deg) translate(0px, 10px);
  }
  66% {
    transform: rotate(12deg) translate(13px, 0px);
  }
  100% {
    transform: rotate(0deg) translate(0px, 0px);
  }
}

@keyframes ball-animation-2 {
  0% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: rotate(30deg) scale(3);
    opacity: 0;
  }
}

眼尖的朋友們可以發現其實我是寫了3個動畫，然後透過時間差拼湊起來。

再補個有光的特效版:

pokemon-1
pokemon-2
pokemon-3

看完如果有什麼意見，或是想法，歡迎下面留言告訴我唷！

↓↓↓ 如果喜歡我的文章，可以幫我按個Like！ ↓↓↓
>> 或者，請我喝杯咖啡，這樣我會更有動力唷！ <<<
街口支付

街口支付

街口帳號: 901061546

相關文章

歡迎關注我的其它發布渠道